<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>应聘审核</title>
    <!--vue-->
    <script src="/js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/css/index.css">
    <!-- 引入组件库 -->
    <script src="/js/index.js"></script>
    <!--axios-->
    <script src="/js/axios.min.js"></script>
</head>
<style>
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>
<body>
<div id="app">
    <el-row>
        <el-col :span="5"><el-input v-model="ename" size="mini" placeholder="请输入姓名"></el-input></el-col>
        <el-col :span="5"><el-button type="primary" size="mini" @click="search()" icon="el-icon-search">搜索</el-button></el-col>
        <el-col :span="5"><el-button type="primary" size="mini" @click="flush()" icon="el-icon-search">刷新</el-button></el-col>
    </el-row>
    <el-row>
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="应聘ID">
            </el-table-column>
            <el-table-column
                    prop="ename"
                    label="应聘者姓名">
            </el-table-column>
            <el-table-column
                    label="应聘者照片">
                <template slot-scope="scope">
                    <el-image
                            style="width: 50px; height: 50px"
                            :src="scope.row.filepath"></el-image>
                </template>
            </el-table-column>
            <el-table-column
                    prop="dname"
                    label="申请部门">
            </el-table-column>
            <el-table-column
                    prop="pname"
                    label="申请职位">
            </el-table-column>
            <el-table-column
                    prop="time"
                    label="申请时间">
            </el-table-column>
            <el-table-column prop="status" label="状态" width="180">
                <template slot-scope="scope">
　　　　　　　　　　<span v-if="scope.row.status==1">未审核</span>
　　　　　　　　　　<span v-if="scope.row.status==2">驳回</span>
　　　　　　　　　　<span v-if="scope.row.status==3">入职成功</span>
　　　　　　　　　　<span v-if="scope.row.status==4">离职</span>
　　　　　　　　</template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            type="primary"
                            @click="toDetails(scope.row.id)">应聘者详情</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-row>
    <el-row>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[2,3,5,10,100, 200, 300, 400]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </el-row>



    <el-row>
        <!--详情模态框-->
        <el-dialog title="应聘者详情" :visible.sync="editFormVisible">
            <el-form :model="form">
                <el-form-item v-if='show' label="应聘ID" :label-width="formLabelWidth">
                    <el-input v-model="form.id" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="应聘者姓名" :label-width="formLabelWidth">
                    <el-input v-model="form.ename" :disabled="true" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="性别" :label-width="formLabelWidth">
                    <el-input v-model="form.sex" :disabled="true" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="应聘者照片" :label-width="formLabelWidth">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-form-item>
                <el-form-item label="身份证" :label-width="formLabelWidth">
                    <el-input v-model="form.idcard" :disabled="true" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="手机号码" :label-width="formLabelWidth">
                    <el-input v-model="form.phone" :disabled="true" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="毕业院校" :label-width="formLabelWidth">
                    <el-input v-model="form.graduation" :disabled="true" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="教育经历" :label-width="formLabelWidth">
                    <el-input v-model="form.education" :disabled="true" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="应聘部门" :label-width="formLabelWidth">
                    <el-input v-model="form.dname" :disabled="true" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="应聘职位" :label-width="formLabelWidth">
                    <el-input v-model="form.pname" :disabled="true" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth">
                    <span v-if="form.status==1">未审核</span>
                    <span v-if="form.status==2">驳回</span>
                    <span v-if="form.status==3">入职成功</span>
                    <span v-if="form.status==4">离职</span>
                </el-form-item>
                <el-form-item label="审核意见" :label-width="formLabelWidth">
                    <el-input
                            type="textarea"
                            :rows="2"
                            placeholder="请输入内容"
                            v-model="form.reason">
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editFormVisible = false">取 消</el-button>
                <el-button type="danger" @click="reject()">驳 回</el-button>
                <el-button type="primary" @click="accept()">同 意</el-button>
            </div>
        </el-dialog>
    </el-row>
</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{//数据
            tableData:[],//应聘者们
            currentPage:1,
            pageSize:5,
            total:20,
            ename:null,//搜索应聘者姓名
            editFormVisible:false,//应聘者详情模态框是否显示
            form:{},//应聘者详情
            formLabelWidth:"120px",
            imageUrl:''//应聘者照片
        },
        created:function () {
            this.loadData();
        },
        methods:{//方法
            //加载数据的方法
            loadData:function () {
                _this =this;
                //初始化数据
                axios.get('/recruit/recruitPage', {
                    params: {
                        pageNo:this.currentPage,
                        pageSize:this.pageSize,
                        ename:this.ename
                    }
                }).then(function (response) {
                    //赋值分页列表
                    _this.tableData = response.data.list;
                    //删除最后一页为空时，调到上一页
                    //alert(_this.tableData.length);
                    if(_this.tableData.length==0&&_this.currentPage!=1){
                        _this.currentPage=_this.currentPage-1;
                        _this.loadData();
                    }
                    //赋值总条数
                    _this.total = response.data.total;
                }).catch(function (error) {
                    // handle error 处理异常
                    //console.log(error);
                }).then(function () {
                    // always executed总是执行 相当于finally
                });
            },
            //每页数量发生变化时
            handleSizeChange:function (v) {
                this.pageSize=v;
                this.loadData();
            },
            //当前页数放生变化是
            handleCurrentChange:function (v) {
                this.currentPage=v;
                this.loadData();
            },
            // 搜索方法
            search:function () {
                this.currentPage=1;
                this.loadData();
            },
            flush:function () {//刷新
                this.loadData();
            },
            //打开应聘者详情模态框
            toDetails:function (id) {
                this.form={};
                this.imageUrl='';
                //请求当前行id的数据
                axios.post('/recruit/recruitOne?id='+id).then(function (response) {
                    _this.form = response.data.list;
                    if (response.data.filepath!=0){
                        _this.imageUrl=response.data.filepath;
                    }
                })
                this.editFormVisible=true;
            },
            //通过
            accept:function(){
                axios.post('/recruit/accept',this.form).then(function (response) {
                    if(response.data.code == 2001){
                        //提示成功
                        _this.$message({
                            message: '业务成功',
                            type: 'success'
                        });
                        //关闭弹出框
                        _this.editFormVisible=false;
                        //重新加载数据
                        _this.loadData();
                    }
                }).catch(function (error) {
                    _this.$message.error("添加失败");
                });
            },
            //驳回
            reject:function(){
                //JSON.stringify JSON 转 String？？？
                //alert(JSON.stringify(this.form));
                axios.post('/recruit/reject',this.form).then(function (response) {
                    if(response.data.code == 2001){
                        //提示成功
                        _this.$message({
                            message: '驳回成功',
                            type: 'success'
                        });
                    }else {
                        _this.$message.error("该职位所需人数已满");
                    }
                    //关闭弹出框
                    _this.editFormVisible=false;
                    //重新加载数据
                    _this.loadData();
                })
            }
        }
    });
</script>
</body>
</html>